
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>查询请假记录</title>
</head>
<body>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <link rel="stylesheet" type="text/css" href="../themes/bootstrap/easyui.css">
	    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
	    <link rel="stylesheet" type="text/css" href="../themes/color.css">
		<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
		<script src="../bootstrap/js/bootstrap.min.js"></script>
	    <script src="../js/jquery.min.js"></script>
	    <script src="../bootstrap/js/jquery-1.11.1.min.js"></script>
	    <script src="../js/jquery.easyui.min.js"></script>
	    <script src="../js/easyui-lang-zh_CN.js"></script>
	    
	    <link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css">
	    <link rel="stylesheet" type="text/css" href="themes/icon.css">
	    <link rel="stylesheet" type="text/css" href="themes/color.css">
		<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<script src="bootstrap/js/bootstrap.min.js"></script>
	    <script src="js/jquery.min.js"></script>
	    <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
	    <script src="js/jquery.easyui.min.js"></script>
	    <script src="js/easyui-lang-zh_CN.js"></script>
		<title>查询请假记录</title>
	</head>
	<script>
		$(function()
		{
			var currentYear=1;
			var currentMonth=1;
			var currentDay=1;
			var startYear=2016;
			var startMonth=1;
			var startDay=1;
			var selectYear=currentYear;
			var selectMonth=currentMonth;
			var selectDay=currentDay;
			var monthTotalDay=30;
			$(document).ready(function()
			{
				var isLeap = false;
				$.ajax
				({
					url:"<c:url value='/getCurrentTime'/>",
					dataType:"json",
					type:"post",
					success:function(currentTime)
					{
						currentYear=currentTime[0];
						currentMonth=currentTime[1];
						currentDay=currentTime[2];
						selectYear=currentYear;
						selectMonth=currentMonth;
						selectDay=currentDay;
						$("#year option").remove();
						$("#month option").remove();
						$("#day option").remove();
						for(var i=startYear;i<=currentTime[0];i++)
						{
							(currentTime[0] == i)?
							($("#year").append("<option value='"+i+"'selected='selected'>"+i+"</option>")):
							($("#year").append("<option value='"+i+"'>"+i+"</option>"));
						}
						for(var i=startMonth;i<=currentTime[1];i++)
						{
							(currentTime[1] == i)?
							($("#month").append("<option value='"+i+"'selected='selected'>"+i+"</option>")):
							($("#month").append("<option value='"+i+"'>"+i+"</option>"));


						}
						for(var i=startDay;i<=currentTime[2];i++)
						{
							(currentTime[2] == i)?
							($("#day").append("<option value='"+i+"'selected='selected'>"+i+"</option>")):
							($("#day").append("<option value='"+i+"'>"+i+"</option>"));
						}
					}//end of success
				});// end of ajax
			});//end of ready
			$("#year").change(function()
			{
				selectYear=$(this).val();
				isLeap = ((selectYear%400==0) || ((selectYear%4==0) && (selectYear%100 !=0)));
				$("#month option").remove();
				//默认显示1月
				for(var i=1;i<=12;i++)
				{
					($("#month").append("<option value='"+i+"'>"+i+"</option>"));
				}
				$("#day option").remove();
				//默认显示1月1日
				for(var i=1;i<=31;i++)
				{
					($("#day").append("<option value='"+i+"'>"+i+"</option>"));
				}
				if(currentYear == selectYear)
				{
					//移除month.select 下面的所有子节点
					$("#month option").remove();
					//循环动态加载option
					for(var i=startMonth;i<=currentMonth;i++)
					{
						(currentMonth == i)?
						($("#month").append("<option value='"+i+"'selected='selected'>"+i+"</option>")):
						($("#month").append("<option value='"+i+"'>"+i+"</option>"));

					}
					$("#day option").remove();
					for(var i=startDay;i<=currentDay;i++)
					{
						(currentDay == i)?
						($("#day").append("<option value='"+i+"'selected='selected'>"+i+"</option>")):
						($("#day").append("<option value='"+i+"'>"+i+"</option>"));
					}
				}
			});//end of year.change
			//#month  添加change事件
			$("#month").change(function()
			{
				$("#day option").remove();
				selectMonth=$(this).val();
				var bigMonthFlag = (selectMonth==1||selectMonth==3||selectMonth==5||selectMonth==7
										||selectMonth==8||selectMonth==10||selectMonth==12);
				var smallMonthFlag = (selectMonth==4||selectMonth==6||selectMonth==9||selectMonth==11);
				if(bigMonthFlag)
				{
					monthTotalDay=31;
				}
				else if(smallMonthFlag)
				{
					monthTotalDay=30;
				}
				else
				{
					if(isLeap)
					{
						monthTotalDay=29;
					}
					else
					{
						monthTotalDay=28;
					}
				}
				for(var i=1;i<=monthTotalDay;i++)
				{
					($("#day").append("<option value='"+i+"'>"+i+"</option>"));
				}
			});//end of month.change
			
			//查询类别select框
			$("#selmanner").change(function()
			{
				//将二、三级的除first节点以外的子节点移除
				$("#dept option:not(:first)").remove();
				$("#emp option:not(:first)").remove();
				$("#span1").html("可分别进行年、月、日查询出勤记录,默认为<b style='color:red'>当前年全体员工</b>所有记录...");
				//获取1级select的值
				var smanner = $(this).val();
				//一级选择的是全体
				if(smanner == "all")
				{
					$("#table").datagrid
					({
						url:"<c:url value='/getAllEmpOverTime'/>",
						title:"查看请假记录",
						width:1000,
						rownumbers:true,
				        fitColumns:true, 
				        singleSelect:true,
					    pagination:true,
					    striped:true,
					    rownumbers:true,
					    loadMsg:"正在加载数据,请稍后...",
					    queryParams:
					    {
					    	state_zxk:"请假",
							year:currentYear
					    },
					    columns:
					    [[ 
					        {field:'att_id',title:'序号',width:100,hidden:true},    
					        {field:'uname',title:'姓名',width:100},    
					        {field:'state_zxk',title:'状态',width:100},
					        {field:'time',title:'时长',width:100},
					        {field:'date',title:'日期',width:200},
					        {field:'remark',title:'备注',width:400},
					        {field:'uid',title:'员工id',width:100,hidden:true},
					    ]],
					    pageSize:5,
						pageList:[5,10,15,20],
					});//end of all datagrid
					$("#year").change(function()
					{
						selectYear=$(this).val();
						$("#table tr:not():first").empty();
						$("#table").datagrid
						({
							url:"<c:url value='/getSelectYrOvertime'/>",
							title:"查看请假记录",
							width:1000,
							rownumbers:true,
					        fitColumns:true, 
					        singleSelect:true,
						    pagination:true,
						    striped:true,
						    rownumbers:true,
						    loadMsg:"正在加载数据,请稍后...",
						    queryParams:
						    {
						    	state_zxk:"请假",
								year:selectYear
						    },
						    columns:
						    [[ 
						        {field:'att_id',title:'序号',width:100,hidden:true},    
						        {field:'uname',title:'姓名',width:100},    
						        {field:'state_zxk',title:'状态',width:100},
						        {field:'time',title:'时长',width:100},
						        {field:'date',title:'日期',width:200},
						        {field:'remark',title:'备注',width:400},
						        {field:'uid',title:'员工id',width:100,hidden:true},
						    ]],
						    pageSize:5,
							pageList:[5,10,15,20],
						});//end of datagrid
					});//end of year change
					$("#month").change(function()
					{
						selectMonth=$(this).val();
						$("#table tr:not():first").empty();
						$("#table").datagrid
						({
							url:"<c:url value='/getSelectYrMthOvertime'/>",
							title:"查看请假记录",
							width:1000,
							rownumbers:true,
					        fitColumns:true, 
					        singleSelect:true,
						    pagination:true,
						    striped:true,
						    rownumbers:true,
						    loadMsg:"正在加载数据,请稍后...",
						    queryParams:
						    {
						    	state_zxk:"请假",
								year:selectYear,
						    	month:selectMonth
						    },
						    columns:
						    [[ 
						        {field:'att_id',title:'序号',width:100,hidden:true},    
						        {field:'uname',title:'姓名',width:100},    
						        {field:'state_zxk',title:'状态',width:100},
						        {field:'time',title:'时长',width:100},
						        {field:'date',title:'日期',width:200},
						        {field:'remark',title:'备注',width:400},
						        {field:'uid',title:'员工id',width:100,hidden:true},
						    ]],
						    pageSize:5,
							pageList:[5,10,15,20],
						});//end of datagrid
					});//end of month.change
					$("#day").change(function()
					{
						selectDay=$(this).val();
						$("#table tr:not():first").empty();
						$("#table").datagrid
						({
							url:"<c:url value='/getSelectYrMthDayOvertime'/>",
							title:"查看请假记录",
							width:1000,
							rownumbers:true,
					        fitColumns:true, 
					        singleSelect:true,
						    pagination:true,
						    striped:true,
						    rownumbers:true,
						    loadMsg:"正在加载数据,请稍后...",
						    queryParams:
						    {
						    	state_zxk:"请假",
								year:selectYear,
						    	month:selectMonth,
						    	day:selectDay
						    },
						    columns:
						    [[ 
						        {field:'att_id',title:'序号',width:100,hidden:true},    
						        {field:'uname',title:'姓名',width:100},    
						        {field:'state_zxk',title:'状态',width:100},
						        {field:'time',title:'时长',width:100},
						        {field:'date',title:'日期',width:200},
						        {field:'remark',title:'备注',width:400},
						        {field:'uid',title:'员工id',width:100,hidden:true},
						    ]],
						    pageSize:5,
							pageList:[5,10,15,20],
						});//end of day datagrid
					});//end of day.change
				}
				//一级点击的是部门
				else if(smanner == "dept")
				{
					$("#table tr:not(:first)").remove();
					$("#span1").html("");
					$("#span1").html("可分别进行年、月、日查询出勤记录,默认为<b style='color:red'>当前年所有部门</b>的记录...");
					//获取部门名称
					$.ajax
					({
						url:"<c:url value='/getDeptName'/>",
						dataType:"json",
						type:"post",
						success:function(dnames)
			    		{
							if(dnames.length == 0)
							{
								alert("当前没有部门！");
							}
							else
							{
								for(var i=0;i<dnames.length;i++)
								{
									var dep_id = dnames[i].dep_id;
									var dep_name = dnames[i].dep_name;
									$("#dept").append("<option value='"+dep_id+"'>"+dep_name+"</option>");
								}
							}
			    		}//end of success
					});//end of ajax
					//选择1级select部选择门后的table默认加载当前年的所有加班记录
					$("#table").datagrid
					({
						url:"<c:url value='/getAllEmpOverTime'/>",
						title:"查看请假记录",
						width:1000,
						rownumbers:true,
				        fitColumns:true, 
				        singleSelect:true,
					    pagination:true,
					    striped:true,
					    rownumbers:true,
					    loadMsg:"正在加载数据,请稍后...",
					    queryParams:
					    {
					    	state_zxk:"请假",
							year:currentYear
					    },
					    columns:
					    [[ 
					        {field:'att_id',title:'序号',width:100,hidden:true},    
					        {field:'uname',title:'姓名',width:100},    
					        {field:'state_zxk',title:'状态',width:100},
					        {field:'time',title:'时长',width:100},
					        {field:'date',title:'日期',width:200},
					        {field:'remark',title:'备注',width:400},
					        {field:'uid',title:'员工id',width:100,hidden:true},
					    ]],
					    pageSize:5,
						pageList:[5,10,15,20],
					});//end of dept datagrid
					$("#dept").change(function()
					{
						$("#emp option:not(:first)").remove();
						$("#table tr:not(:first)").empty();
						var currentDeptid = $(this).val();
						var currentDeptname = $("#dept").find("option:selected").text();
						$("#span1").html("");
						$("#span1").html("可分别进行年、月、日查询出勤记录,默认为<b style='color:red'>当前年"+currentDeptname+"</b>所有记录...");
						$.ajax
						({
							url:"<c:url value='/getDempName'/>",
							dataType:"json",
							data:
							{
								dep_id:currentDeptid
							},
							type:"post",
							success:function(enames)
							{
								for(var i=0;i<enames.length;i++)
								{
									var uid = enames[i].uid;
									var uname = enames[i].uname;
									$("#emp").append("<option value='"+uid+"'>"+uname+"</option>");
								}
							}
						});//end of ajax
						//记载选择部门所有记录
						$("#table").datagrid
						({
							url:"<c:url value='/getSelectDeptYrOvertime'/>",
							title:"查看请假记录",
							width:1000,
							rownumbers:true,
					        fitColumns:true, 
					        singleSelect:true,
						    pagination:true,
						    striped:true,
						    rownumbers:true,
						    loadMsg:"正在加载数据,请稍后...",
						    queryParams:
						    {
						    	state_zxk:"请假",
								year:selectYear,
								dep_id:currentDeptid
						    },
						    columns:
						    [[ 
						        {field:'att_id',title:'序号',width:100,hidden:true},    
						        {field:'uname',title:'姓名',width:100},    
						        {field:'state_zxk',title:'状态',width:100},
						        {field:'time',title:'时长',width:100},
						        {field:'date',title:'日期',width:200},
						        {field:'remark',title:'备注',width:400},
						        {field:'uid',title:'员工id',width:100,hidden:true},
						    ]],
						    pageSize:5,
							pageList:[5,10,15,20],
						});//end of day datagrid
						$("#year").change(function()
						{
							selectYear=$(this).val();
							$("#table tr:not():first").empty();
							$("#table").datagrid
							({
								url:"<c:url value='/getSelectDeptYrOvertime'/>",
								title:"查看请假记录",
								width:1000,
								rownumbers:true,
						        fitColumns:true, 
						        singleSelect:true,
							    pagination:true,
							    striped:true,
							    rownumbers:true,
							    loadMsg:"正在加载数据,请稍后...",
							    queryParams:
							    {
							    	state_zxk:"请假",
									year:selectYear,
							    	dep_id:currentDeptid
							    },
							    columns:
							    [[ 
							        {field:'att_id',title:'序号',width:100,hidden:true},    
							        {field:'uname',title:'姓名',width:100},    
							        {field:'state_zxk',title:'状态',width:100},
							        {field:'time',title:'时长',width:100},
							        {field:'date',title:'日期',width:200},
							        {field:'remark',title:'备注',width:400},
							        {field:'uid',title:'员工id',width:100,hidden:true},
							    ]],
							    pageSize:5,
								pageList:[5,10,15,20],
							});//end of datagrid
						});//end of year change
						$("#month").change(function()
						{
							selectMonth=$(this).val();
							$("#table tr:not():first").empty();
							$("#table").datagrid
							({
								url:"<c:url value='/getSelectYrMthOvertime'/>",
								title:"查看请假记录",
								width:1000,
								rownumbers:true,
						        fitColumns:true, 
						        singleSelect:true,
							    pagination:true,
							    striped:true,
							    rownumbers:true,
							    loadMsg:"正在加载数据,请稍后...",
							    queryParams:
							    {
							    	state_zxk:"请假",
									year:selectYear,
							    	month:selectMonth,
							    	dep_id:currentDeptid
							    },
							    columns:
							    [[ 
							        {field:'att_id',title:'序号',width:100,hidden:true},    
							        {field:'uname',title:'姓名',width:100},    
							        {field:'state_zxk',title:'状态',width:100},
							        {field:'time',title:'时长',width:100},
							        {field:'date',title:'日期',width:200},
							        {field:'remark',title:'备注',width:400},
							        {field:'uid',title:'员工id',width:100,hidden:true},
							    ]],
							    pageSize:5,
								pageList:[5,10,15,20],
							});//end of datagrid
						});//end of month.change
						$("#day").change(function()
						{
							selectDay=$(this).val();
							$("#table tr:not():first").empty();
							$("#table").datagrid
							({
								url:"<c:url value='/getSelectYrMthDayOvertime'/>",
								title:"查看请假记录",
								width:1000,
								rownumbers:true,
						        fitColumns:true, 
						        singleSelect:true,
							    pagination:true,
							    striped:true,
							    rownumbers:true,
							    loadMsg:"正在加载数据,请稍后...",
							    queryParams:
							    {
							    	state_zxk:"请假",
									year:selectYear,
							    	month:selectMonth,
							    	day:selectDay,
							    	dep_id:currentDeptid
							    },
							    columns:
							    [[ 
							        {field:'att_id',title:'序号',width:100,hidden:true},    
							        {field:'uname',title:'姓名',width:100},    
							        {field:'state_zxk',title:'状态',width:100},
							        {field:'time',title:'时长',width:100},
							        {field:'date',title:'日期',width:200},
							        {field:'remark',title:'备注',width:400},
							        {field:'uid',title:'员工id',width:100,hidden:true},
							    ]],
							    pageSize:5,
								pageList:[5,10,15,20],
							});//end of day datagrid
						});//end of day.change
					});//end of dept change
					$("#emp").change(function()
					{
						var currentUid = $(this).val();
						var currentEmpname = $("#emp").find("option:selected").text();
						$("#table tr:not(:first)").empty();
						$("#span1").html("");
						$("#span1").html("可分别进行年、月、日查询出勤记录,默认为<b style='color:red'>当前年"+currentEmpname+"</b>所有记录...");
						$("#table").datagrid
						({
							url:"<c:url value='/getSelectDempYrOvertime'/>",
							title:"查看请假记录",
							width:1000,
							rownumbers:true,
					        fitColumns:true, 
					        singleSelect:true,
						    pagination:true,
						    striped:true,
						    rownumbers:true,
						    loadMsg:"正在加载数据,请稍后...",
						    queryParams:
						    {
						    	state_zxk:"请假",
								year:selectYear,
								uid:currentUid
						    },
						    columns:
						    [[ 
						        {field:'att_id',title:'序号',width:100,hidden:true},    
						        {field:'uname',title:'姓名',width:100},    
						        {field:'state_zxk',title:'状态',width:100},
						        {field:'time',title:'时长',width:100},
						        {field:'date',title:'日期',width:200},
						        {field:'remark',title:'备注',width:400},
						        {field:'uid',title:'员工id',width:100,hidden:true},
						    ]],
						    pageSize:5,
							pageList:[5,10,15,20],
						});//end of day datagrid
						$("#year").change(function()
						{
							selectYear=$(this).val();
							$("#table tr:not():first").empty();
							$("#table").datagrid
							({
								url:"<c:url value='/getSelectDempYrOvertime'/>",
								title:"查看请假记录",
								width:1000,
								rownumbers:true,
						        fitColumns:true, 
						        singleSelect:true,
							    pagination:true,
							    striped:true,
							    rownumbers:true,
							    loadMsg:"正在加载数据,请稍后...",
							    queryParams:
							    {
							    	state_zxk:"请假",
									year:selectYear,
							    	uid:currentUid
							    },
							    columns:
							    [[ 
							        {field:'att_id',title:'序号',width:100,hidden:true},    
							        {field:'uname',title:'姓名',width:100},    
							        {field:'state_zxk',title:'状态',width:100},
							        {field:'time',title:'时长',width:100},
							        {field:'date',title:'日期',width:200},
							        {field:'remark',title:'备注',width:400},
							        {field:'uid',title:'员工id',width:100,hidden:true},
							    ]],
							    pageSize:5,
								pageList:[5,10,15,20],
							});//end of datagrid
						});//end of year change
						$("#month").change(function()
						{
							selectMonth=$(this).val();
							$("#table tr:not():first").empty();
							$("#table").datagrid
							({
								url:"<c:url value='/getSelectDempYrMthOvertime'/>",
								title:"查看请假记录",
								width:1000,
								rownumbers:true,
						        fitColumns:true, 
						        singleSelect:true,
							    pagination:true,
							    striped:true,
							    rownumbers:true,
							    loadMsg:"正在加载数据,请稍后...",
							    queryParams:
							    {
							    	state_zxk:"请假",
									year:selectYear,
							    	month:selectMonth,
							    	uid:currentUid
							    },
							    columns:
							    [[ 
							        {field:'att_id',title:'序号',width:100,hidden:true},    
							        {field:'uname',title:'姓名',width:100},    
							        {field:'state_zxk',title:'状态',width:100},
							        {field:'time',title:'时长',width:100},
							        {field:'date',title:'日期',width:200},
							        {field:'remark',title:'备注',width:400},
							        {field:'uid',title:'员工id',width:100,hidden:true},
							    ]],
							    pageSize:5,
								pageList:[5,10,15,20],
							});//end of datagrid
						});//end of month.change
						$("#day").change(function()
						{
							selectDay=$(this).val();
							$("#table tr:not():first").empty();
							$("#table tr:not():first").empty();
							$("#table").datagrid
							({
								url:"<c:url value='/getSelectDempYrMthDayOvertime'/>",
								title:"查看请假记录",
								width:1000,
								rownumbers:true,
						        fitColumns:true, 
						        singleSelect:true,
							    pagination:true,
							    striped:true,
							    rownumbers:true,
							    loadMsg:"正在加载数据,请稍后...",
							    queryParams:
							    {
							    	state_zxk:"请假",
									year:selectYear,
							    	month:selectMonth,
							    	day:selectDay,
							    	uid:currentUid
							    },
							    columns:
							    [[ 
							        {field:'att_id',title:'序号',width:100,hidden:true},    
							        {field:'uname',title:'姓名',width:100},    
							        {field:'state_zxk',title:'状态',width:100},
							        {field:'time',title:'时长',width:100},
							        {field:'date',title:'日期',width:200},
							        {field:'remark',title:'备注',width:400},
							        {field:'uid',title:'员工id',width:100,hidden:true},
							    ]],
							    pageSize:5,
								pageList:[5,10,15,20],
							});//end of day datagrid
						});//end of day.change
					});
				}
				else
				{
					$("#table tr:not(:first)").empty();
					$("#u2 li").remove();
				}//end of selmanner.if
			});	// end of selmanner.select
		});//end of $();
	</script> <!-- end of script -->
	<body>
		<h1>查询请假记录</h1>
		<!-- 查询方式下拉选择 -->
		<div id="sel">
			<!-- 部门select标签 -->
			<b>查询类别:全体/部门</b>&nbsp;
			<select id="selmanner">
				<option value="">请选择...</option>
				<option value="all">全体</option>
				<option value="dept">部门</option>
			</select>&nbsp;&nbsp;
			
			<!-- 部门select标签 -->
			<b>部门</b>&nbsp;
			<select id="dept">
				<option value="">请选择...</option>
			</select>&nbsp;&nbsp;
			
			<!-- 部门员工select标签 -->
			<b>员工</b>&nbsp;
			<select id="emp">
				<option value="">请选择...</option>
			</select>	<!-- end of manner select -->
			
			<br /><br />
			
			<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日期:年/月/日</b>&nbsp;
			<!-- 年select标签 -->
			<select id="year"></select>&nbsp;&nbsp;
			
			<!-- 月select标签 -->
			<select id="month"></select>&nbsp;&nbsp;
			
			<!-- 日select标签 -->
			<select id="day"></select>
		</div><!-- end of select wrapper -->
		<span id="span1" style="font-family:华文中宋; color:blue; "></span>
		<br />
		<table id="table"></table>
		<!-- 员工请假信息列表项 -->
		<nav>
		 	<ul class="pagination" id="u2"></ul>
		</nav>
	</body>
</html>